<html>
<head>
    <title>用电参数</title>
    <link rel="stylesheet" href="../../../assets/theme-chalk/index.css">
    <link rel="stylesheet" href="../../../style.css">

    <style>
        body{
            background: #F2F2F2;
        }


        .main-head{
            background: #fff;
            padding-left: 10px;
            padding-top: 10px;
            margin-bottom: 0px;
            border: solid 1px #fff;
        }

        .chart-outer{
            height: 200px;
        }




    </style>
</head>
<body>
<div class="page" id="page-load">

    <div class="page-title">报表管理 › 负荷统计</div>
    <div class="page-main">
        <el-row>
            <el-col :span="4">
                <dev-tree v-on:click-node="aa" :tabsign="'z'" ></dev-tree>
            </el-col>
            <el-col :span="20">
                <div class="main-head">
                    <el-form :inline="true">
                        <el-form-item label="">
                            <el-date-picker :type="dateMod" v-model="day" :value-format="dateFormat" placeholder="日期" style="width: 150px;"></el-date-picker>
                        </el-form-item>

                        <el-form-item>
                            <el-tooltip effect="dark" content="请点击左边树中区域" v-model="tooltip" placement="right">
                            <el-button type="primary" @click="search" style="background: #578BBB">查询</el-button>
                            </el-tooltip>
                        </el-form-item>
                    </el-form>
                </div>

                <el-tabs class="el-tabs_line" v-model="tabName" @tab-click="onTabClick">
                    <el-tab-pane label="日负荷" name="loadDay">
                        <el-table border stripe style="width: 100%" :data="loadData">
                            <el-table-column prop="deviceName" label="测量点">
                            </el-table-column>
                            <el-table-column prop="h0" label="00:00">
                            </el-table-column>
                            <el-table-column prop="h1" label="01:00">
                            </el-table-column>
                            <el-table-column prop="h2" label="02:00">
                            </el-table-column>
                            <el-table-column prop="h3" label="03:00">
                            </el-table-column>
                            <el-table-column prop="h4" label="04:00">
                            </el-table-column>
                            <el-table-column prop="h5" label="05:00">
                            </el-table-column>
                            <el-table-column prop="h6" label="06:00">
                            </el-table-column>
                            <el-table-column prop="h7" label="07:00">
                            </el-table-column>
                            <el-table-column prop="h8" label="08:00">
                            </el-table-column>
                            <el-table-column prop="h9" label="09:00">
                            </el-table-column>
                            <el-table-column prop="h10" label="10:00">
                            </el-table-column>
                            <el-table-column prop="h11" label="11:00">
                            </el-table-column>
                            <el-table-column prop="h12" label="12:00">
                            </el-table-column>
                            <el-table-column prop="h13" label="13:00">
                            </el-table-column>
                            <el-table-column prop="h14" label="14:00">
                            </el-table-column>
                            <el-table-column prop="h15" label="15:00">
                            </el-table-column>
                            <el-table-column prop="h16" label="16:00">
                            </el-table-column>
                            <el-table-column prop="h17" label="17:00">
                            </el-table-column>
                            <el-table-column prop="h18" label="18:00">
                            </el-table-column>
                            <el-table-column prop="h19" label="19:00">
                            </el-table-column>
                            <el-table-column prop="h20" label="20:00">
                            </el-table-column>
                            <el-table-column prop="h21" label="21:00">
                            </el-table-column>
                            <el-table-column prop="h22" label="22:00">
                            </el-table-column>
                            <el-table-column prop="h23" label="23:00">
                            </el-table-column>
                        </el-table>
                    </el-tab-pane>
                    <el-tab-pane label="月负荷" name="loadMonth">
                        <el-table border stripe style="width: 100%" :data="loadData">
                            <el-table-column prop="attributes.showtime" label="日期">
                            </el-table-column>
                            <el-table-column prop="attributes.devicename" label="测量点">
                            </el-table-column>
                            <el-table-column prop="field42" label="最大值">
                            </el-table-column>
                            <el-table-column prop="attributes.T01_2" label="最大时间">
                            </el-table-column>
                            <el-table-column prop="field12" label="最小值">
                            </el-table-column>
                            <el-table-column prop="attributes.T01_1" label="最小时间">
                            </el-table-column>
                            <el-table-column prop="" label="平均值">
                            </el-table-column>
                        </el-table>
                    </el-tab-pane>
                    <el-tab-pane label="年负荷" name="loadYear">
                        <el-table border stripe style="width: 100%" :data="loadData">
                            <el-table-column prop="attributes.showtime" label="日期">
                            </el-table-column>
                            <el-table-column prop="attributes.devicename" label="测量点">
                            </el-table-column>
                            <el-table-column prop="field42" label="最大值">
                            </el-table-column>
                            <el-table-column prop="attributes.T01_2" label="最大时间">
                            </el-table-column>
                            <el-table-column prop="field12" label="最小值">
                            </el-table-column>
                            <el-table-column prop="attributes.T01_1" label="最小时间">
                            </el-table-column>
                            <el-table-column prop="" label="平均值">
                            </el-table-column>
                        </el-table>

                    </el-tab-pane>
                </el-tabs>
            </el-col>
        </el-row>
    </div>


</div>



<script type='text/javascript' src='../../../assets/bundle.js' charset='utf-8'></script>
<script type='text/javascript' src='../../../assets/jquery-1.11.2.min.js' charset='utf-8'></script>
<script type='text/javascript' src='../../../assets/echarts.min.js' charset='utf-8'></script>
<script type='text/javascript' src='../../../js/common.js' charset='utf-8'></script>
<script type='text/javascript' src='../../../js/component.js' charset='utf-8'></script>

<script>

    var vuePage=new Vue({
        el:'#page-load',
        data:{
            day:'',
            tabName:'loadDay',
            loadData:'',
            dateMod:'date',
            expandId:'',
            currentId:'',
            dateFormat:'yyyy-MM-dd',
            tooltip:false,
            dataId:'',
        },
        methods:{
            search:function(){

              this.getLoadData();
            },
            aa:function(data){
                this.dataId  = data.dataId;
                this.currentId = data.id;
                this.getLoadData();
            },

            onTabClick(tab, event) {
                switch (tab.name) {
                    case 'loadDay':
                        this.dateMod = 'date';
                        this.day = TimeUtil.convertToString(new Date()).substr(0,10);
                        this.dateFormat = 'yyyy-MM-dd';
                        break;
                    case 'loadMonth':
                        this.dateMod = 'month';
                        this.day = TimeUtil.convertToString(new Date()).substr(0,7);
                        this.dateFormat = 'yyyy-MM';
                        break;
                    case 'loadYear':
                        this.dateMod = 'year';
                        this.day = TimeUtil.convertToString(new Date()).substr(0,4);
                        this.dateFormat = 'yyyy';
                        break;
                }
                this.getLoadData();
            },
            getLoadData(){
                var ids =this.currentId.split('_');
                switch (ids[0]) {
                    case "Z":  //区域
                        var dArr = this.day.split('-');
                        var param={
                            zoneIds:[ids[1]].join(','),
                            zoneType:0,
                            energyType:'Electric',
                            year:dArr[0]||0,
                            month:dArr[1]||0,
                            day:dArr[2]||0,
                            sumType:0,
                        };
                        HttpUtil.get('Analysis/getEnergyParam', param).success((res)=>{
                            if (this.dateMod == 'date'){
                                var data = {};
                                for(var item of res.data){
                                    if(typeof data[item.attributes.deviceid] == "undefined"){
                                        var devicedata = {deviceName:item.attributes.devicename};
                                        for (var i =0;i<24;i++){
                                            devicedata["h"+i]=0;
                                        }
                                        devicedata["h"+item.attributes.dd_hour] = item.field12;
                                        data[item.attributes.deviceid] = devicedata;

                                    }else {
                                        data[item.attributes.deviceid]["h"+item.attributes.dd_hour] = item.field12;
                                    }
                                }
                                var tableData=[];
                                for (var ind in data){
                                    tableData.push(data[ind]);
                                }
                                this.loadData = tableData;
                            }
                            else {
                                this.loadData = res.data;
                            }
                        });
                        break;
                    case "D":    //设备
                        var dArr = this.day.split('-');
                        var param={
                            zoneIds:[this.dataId].join(','),
                            zoneType:3,
                            energyType:'Electric',
                            year:dArr[0]||0,
                            month:dArr[1]||0,
                            day:dArr[2]||0,
                            sumType:0,
                        };
                        HttpUtil.get('Analysis/getEnergyParam', param).success((res)=>{

                            if (this.dateMod == 'date'){
                                var data = {};
                                for(var item of res.data){
                                    if(typeof data[item.attributes.deviceid] == "undefined"){
                                        var devicedata = {deviceName:item.attributes.devicename};
                                        for (var i =0;i<24;i++){
                                            devicedata["h"+i]=0;
                                        }
                                        devicedata["h"+item.attributes.dd_hour] = item.field12;
                                        data[item.attributes.deviceid] = devicedata;

                                    }else {
                                        data[item.attributes.deviceid]["h"+item.attributes.dd_hour] = item.field12;
                                    }
                                }
                                var tableData=[];
                                for (var ind in data){
                                    tableData.push(data[ind]);
                                }
                                this.loadData = tableData;
                            }
                            else {
                                this.loadData = res.data;
                            }
                        });
                        break;
                    default:
                        this.loadData = {};
                        break;
                }
            }

        },
        created:function(){

            this.day = TimeUtil.convertToString(new Date()).substr(0,10);

        },
        mounted:function(){
            this.tooltip =true;
        }
    });


</script>

</body>
</html>
